<template>
	<view class="container" v-if="articleDetail">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#ffffff" leftWidth="90rpx" rightWidth="90rpx" color="#333" :fixed="true" :padding="false" :border="navBorder" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">补单详情</text>
			<template slot="right">
			</template>
		</uni-nav-bar>
		<scroll-view
			class="scroll-Y" 
			:style="scrollHeight"
			:refresher-enabled="true" 
			refresher-default-style="none" 
			:scroll-y="true"
			:refresher-triggered="refreshing"
			refresher-background="rgba(255, 255, 255, 0)"
			@refresherrefresh="refresh"
			@scroll="scroll"
		>
		<view class="body">
			<view class="post-detail-body">
				<view class="item-body-text">
					<text class="content">{{articleDetail.content}}</text>
				</view>
				<view class="item-body-image flex-c">
					<template v-for="(img, index) in articleDetail.imageUrl">
						<image :src="img" @error="imageError(index)" :key="index" @tap="previewImage(articleDetail.imageUrl, index)" mode="widthFix"></image>
					</template>
				</view>
				<view class="item-foot">
					<uni-dateformat class="date text-info color-grey" :date="articleDetail.createTime" format="yyyy.MM.dd hh:mm"></uni-dateformat>
				</view>
			</view>
		</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				articleId: null,
				articleDetail: null,
				expertInfo: null,
				
				imageList: [],
				
				navBorder: false, //导航栏下边框
				refreshing: false //下拉刷新状态
			}
		},
		computed: {
			user() {
				return this.$store.state.user
			},
			scrollHeight() {
				return `height:calc(var(--safe-height) - var(--navbar-height));`;
			}
		},
		onLoad() {
			this.articleId = this.$Route.query.aid
			if(this.articleId){
				this.getAddDetail(this.articleId)
			}else{
				console.log('非法请求');
				this.$CHS.errorRequest('index', '数据请求错误，请返回重试')
			}
		},
		methods: {
			//评论输入行数变化
			lineChange(height) {
				this.textHeight = height
			},
			//页面滑动监听
			scroll(e) {
				//记录滚动位置，设置导航栏下边框
				this.scrollTop = e.detail.scrollTop
				if(e.detail.scrollTop > 10){
					this.navBorder = true
				}else{
					this.navBorder = false
				}
			},
			//下拉刷新
			refresh() {
				//更新刷新状态，加载数据
				this.refreshing = true
				this.getAddDetail(this.articleId)
				setTimeout(() => {
					this.refreshing = false
				}, 800)
			},
			//补单详情
			getAddDetail(articleId) {
				this.$http.get({
					url: '/api/user/article/readArticleExtend',
					data: {
						articleId
					},
				}).then(data => {
					console.log(data);
					if(data.success && data.result && data.result[0]){
						this.articleDetail = data.result[0]
						//处理原始图片
						if(this.articleDetail.imageUrl){
							this.articleDetail.imageUrl = JSON.parse(this.articleDetail.imageUrl)
						}
					}else{
						this.$ShowToast({text: '补单数据加载失败', type: 2})
						setTimeout(()=>{
							this.$goBack(1)
						}, 1000)
					}
					this.$forceUpdate()
				}).catch((err) => {
					console.log(err);
				})
			},
			//图片预览
			previewImage(tempFilePaths, current){
				console.log(tempFilePaths);
				uni.previewImage({
					current: current,
					urls: tempFilePaths,
					loop: true
				});
			},
			//图片加载错误
			imageError(index) {
				this.articleDetail.imageUrl[index] = require('@/public/images/public/error.png');
				this.$forceUpdate()
			}
		}
	}
</script>

<style lang="scss">
	.container{
		.scroll-Y{
			/deep/ .uni-scroll-view-content{
				padding-top: 10rpx;
				height: calc(100% - 10rpx);
			}
		}
	}	
	.body{
		margin-top: 10rpx;
		background-color: #FFFFFF;
		padding: 30rpx 20rpx;
		.post-detail-body{
			font-size: 30rpx;
			line-height: 56rpx;
			.item-body-text{
				text-align: justify;
				.content{
					word-break: break-all;
					overflow-x: hidden;
				}
				font-size: 30rpx;
				font-weight: 500;
				line-height: 45rpx;
				margin-bottom: 20rpx;
			}
			.item-body-image{
				image{
					max-width: 100%;
					width: 710rpx;
					height: auto;
					border-radius: 10rpx;
					margin-bottom: 20rpx;
				}
			}
		}
	}
</style>